<template>
	<tm-app>
		<tm-sheet :width="662">
			<tm-text
				label="宫格排序，在nvue上： 截止3.6.18 uni sdk 的movable有bug,具体来说是动态修改宽和高时，可移动范围会跑上面去。 理论上是支持nvue，只有当uni修复此bug才可使用，否则，请使用vue页面。"></tm-text>
			<tm-divider></tm-divider>
		</tm-sheet>
		<tm-sort @end="enddrage" :list="testList" :height="460" :item-height="150"></tm-sort>
	</tm-app>
</template>

<script lang="ts" setup>
import { ref, Ref } from "vue";
import { onShow, onLoad } from "@dcloudio/uni-app";
import tmApp from "@/tmui/components/tm-app/tm-app.vue";
import tmSheet from "@/tmui/components/tm-sheet/tm-sheet.vue";
import tmText from "@/tmui/components/tm-text/tm-text.vue";
import tmRadio from "@/tmui/components/tm-radio/tm-radio.vue";
import tmRadioGroup from "@/tmui/components/tm-radio-group/tm-radio-group.vue";
import tmDivider from "@/tmui/components/tm-divider/tm-divider.vue";
import tmSort from "@/tmui/components/tm-sort/tm-sort.vue";
const testList: Ref<object[]> = ref([]);
testList.value = [
	{ icon: "tmicon-google", text: "谷歌" },
	{ icon: "tmicon-paypal", text: "paypal" },
	{ icon: "tmicon-md-planet", text: "星球" },
	{ icon: "tmicon-ios-rose", text: "玫瑰花" },
	{ icon: "tmicon-ios-cafe", text: "咖啡" },
	{ icon: "tmicon-ios-leaf", text: "绿色健康" },
	{ icon: "tmicon-ios-umbrella", text: "安全" },
];
function enddrage(newdata: any, olddata: any) {
	console.log("排序后：", newdata, "排序前：", olddata);
}
</script>
